<template>
  <div class="drawalList">
    <van-pull-refresh
      v-model="Refresh"
      @refresh="onLoad"
      success-text="刷新成功"
      class="margin"
    >
      <div v-if="!list.length && finished&&!list.loading">
        <van-empty
          class="custom-image"
          image="https://img.yzcdn.cn/vant/custom-empty-image.png"
          description="暂无记录"
        />
      </div>
      <div v-else>
        <van-list
          v-model:loading="loading"
          :finished="finished"
          @load="onLoad"
          :key="3"
        >
          <div class="list-item" v-for="(value, index) in list" :key="index">
            <div class="date">
              <div class="day">{{ value.stream_time }}</div>
            </div>
            <div class="details">
              <div class="order">
                <div class="price">
                  {{ stream_type[value.stream_type].Symbol
                  }}{{ value.stream_price }}
                </div>
                <!-- <div class="orderid">{{ value.stream_id }}</div> -->
              </div>
            </div>
            <div class="date">
              <div class="day">{{ stream_type[value.stream_type].name }}</div>
            </div>
          </div>
        </van-list>
      </div>
    </van-pull-refresh>
  </div>
</template>
<script>
import { reactive, toRefs } from "vue";
import { GetStreamData } from "@/api/profit";
import { useStore } from "vuex";
export default {
  setup() {
    const data = reactive({
      stream_type: {
        1: { Symbol: "+", name: "结算入账" },
        2: { Symbol: "-", name: "提现" },
        3: { Symbol: "+", name: "积分兑换" },
        4: { Symbol: "+", name: "提现驳回入账" },
      },
      list: [
        //   {
        //     "stream_id":"234223423423423llel3l3k23lk2",   //钱包流水ID
        //  "moneybag_id":"112312334231332342423",   //钱包ID
        //  "stream_type":"1",  //交易类型 1结算入账  2提现  3积分兑换 4提现驳回入账
        //  "stream_price":"900",    //交易金额
        //  "stream_note":"交易摘要"      //交易摘要
        //  "stream_time":"2021-06-21 09:30:04"      //操作时间
        //  "yuliu1":""      //预留
        //  "yuliu2":""      //预留
        //  "yuliu3":""      //预留
        //  "yuliu4":""      //预留
        //   }
      ],
      Refresh: false,
      loading: false,
      finished: false,
      pageNum: 1,
      pageSize: 20,
    });
    const store = useStore();
    const onLoad = async () => {
      if (data.Refresh) {
        data.pageNum = 1;
        data.list = [];
        data.finished = false;
        data.loading=true;
      }
      const res = await GetStreamData({
        moneybag_id: store.state.userInfo.moneybag_id,
        pageNum: data.pageNum,
        pageSize: data.pageSize,
      });
      data.loading = false;
      data.Refresh = false;
      if (!res[0] || !res[1].length) {
        data.finished = true;
        return;
      }
      data.list.push(...res[1]);
      if (res[1].length < data.pageSize) {
        data.finished = true;
      }
      data.pageNum += 1;
    };
    return { ...toRefs(data), onLoad };
  },
};
</script>
<style lang="scss" scoped>
.drawalList {
  margin-top: 1rem;
  color: #aaa;
  font-size: 1.3rem;
  .list-item {
    display: flex;
    padding: 2rem 1rem;
    margin: 1rem 0rem;
    background: #fff;
    border-bottom: 0.5px solid #f3f3f3;
  }
  .date {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    border-right: 0.5px solid #f3f3f3;
    color: #aaa;
    flex: 1;
  }
  .details {
    margin-left: 2rem;
    display: flex;
    justify-content: space-between;
    flex: 2;
  }
  .order {
    text-align: left;
  }
  .price {
    color: #fc4253;
    font-size: 1.8rem;
    padding: 0.5rem 0;
  }
}
</style>